<script>
//
import VisualizationOne from "@/views/visualIargeScreen/components/VisualizationOne.vue";
import VisualizationTwo from "@/views/visualIargeScreen/components/VisualizationTwo.vue";
import VisualizationThree from "@/views/visualIargeScreen/components/VisualizationThree.vue";
import VisualizationFour from "@/views/visualIargeScreen/components/VisualizationFour.vue";
import VisualizationFive from "@/views/visualIargeScreen/components/VisualizationFive.vue";
import VisualizationSix from "@/views/visualIargeScreen/components/VisualizationSix.vue";
import  VisualizationSeven from "@/views/visualIargeScreen/components/VisualizationSeven.vue";
import  VisualizationEight from "@/views/visualIargeScreen/components/VisualizationEight.vue";
import  VisualizationNine from "@/views/visualIargeScreen/components/VisualizationNine.vue";
export default {
  name: 'VisualizationSet',
  components: {
    "VisualizationOne": VisualizationOne,
    "VisualizationTwo": VisualizationTwo,
    "VisualizationThree": VisualizationThree,
    "VisualizationFour": VisualizationFour,
    "VisualizationFive": VisualizationFive,
    "VisualizationSix": VisualizationSix,
    "VisualizationSeven": VisualizationSeven,
    "VisualizationEight": VisualizationEight,
    "VisualizationNine": VisualizationNine,
  }
}
</script>

<template>
  <div id="vis-box">
    <div class="box">
      <div class="box-div1">
        <VisualizationOne></VisualizationOne>
      </div>
      <div class="box-div2">
        <VisualizationTwo></VisualizationTwo>
      </div>
      <div class="box-div3">
        <VisualizationThree></VisualizationThree>
      </div>
    </div>

    <div class="box-top">
      <div class="box-div1">
        <VisualizationFour></VisualizationFour>
      </div>
      <div class="box-div2">
        <VisualizationFive></VisualizationFive>
      </div>
    </div>
    <div class="box-center-one">
      <div class="box-div1">
        <VisualizationSix></VisualizationSix>
      </div>
      <div class="box-div2">
        <VisualizationSeven></VisualizationSeven>
      </div>
    </div>
    <div class="box-center-two">
      <div class="box-div1" ref="loginTimes">
        <VisualizationEight></VisualizationEight>
      </div>
      <div class="box-div2" ref="loginTimes">
        <VisualizationNine></VisualizationNine>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "css/visualIargeScreen.css";
</style>